<!--2019-12-17备份续住功能-->
<template>
  <div class="room-card">
    <a-card style="width:228px; height:152px;" class="card_body">
      <div class="content-bg" :class="{'content-bg1': isRedBgShow}">
        <div class="title">
          <div class="address">
            <p>
              <font class="font18">{{ fh }}</font><br /><span class="font14 weight4 nowrap" :title="roomData.fwdz">{{ roomData.fwdz }}</span>
            </p>
          </div>
          <div class="status">
            <a-icon :component="handleRoomStatus(roomStatus)" style="font-size:43px;" />
          </div>
        </div>
        <div @click="addOrder" class="content" v-if="roomStatus === '未入住'">
          <a-icon :component="iconAdd" style="font-size:31px;" />
          <br />
          <font style="color:#1890FF;">{{ $t('dashboard.addCheckIn') }}</font>
        </div>
        <div @click="handleOrderDetails" class="content" v-else>
          <div class="content-details">
            <div class="rzsj" >{{ rzsj }}<br />
              <font class="weight4 font12">入住日期</font>
            </div>
            <div class="times">{{ rzts }}晚</div>
            <div class="ldsj"> {{ ldsj }} <br>
              <font class="font12 color6 weight4">离店日期</font>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <a-modal :maskClosable="false" v-model="isOrderDetailShow" title="入住详情" :width="930" class="jlw_model_title">
      <order-detail :details="cardData"></order-detail>
      <template slot="footer">
        <template v-if="roomStatus === '已预订'">
          <a-popconfirm title="是否确认取消入住？" @confirm="handleUpdateStatus(4)" okText="确认" cancelText="取消">
            <a-button type="primary" ghost>取消入住</a-button>
          </a-popconfirm>
          <a-button type="primary" ghost @click="handleUpdateOrder">修改入住</a-button>
          <a-popconfirm title="是否办理入住" @confirm="handleUpdateStatus(2)">
            <a-button type="primary" class="primary_linear">{{ textChanges }}</a-button>
          </a-popconfirm>
        </template>
        <template v-else>
          <!-- <a-button type="primary" ghost @click="handleOverStay">办理续住</a-button> -->
          <a-button type="primary" ghost @click="handleUpdateCheckInOrder">修改入住</a-button>
          <a-popconfirm title="是否办理退房？" @confirm="handleUpdateStatus(3)" okText="确认" cancelText="取消">
            <a-button type="primary" class="primary_linear">办理退房</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-modal>
    <a-modal
      :maskClosable="false"
      v-model="isNewOrderShow"
      title="新建订单"
      :width="930"
      class="jlw_model_title"
      destroyOnClose>
      <new-order :order="cardData" ref="newOrder" ></new-order>
      <template slot="footer">
        <a-button type="primary" class="primary_linear" @click="handleNewOrder" :loading="newLoading">新建订单</a-button>
      </template>
    </a-modal>
    <a-modal
      :maskClosable="false"
      v-model="isModifyShow"
      title="修改入住"
      :width="930"
      class="jlw_model_title"
      destroyOnClose>
      <new-order :order="cardData" :modify="isModifyShow" ref="newOrder"></new-order>
      <template slot="footer">
        <a-button type="primary" class="primary_linear" @click="submitUpdateOrder" :loading="updateLoading">修改入住</a-button>
      </template>
    </a-modal>
    <!-- <a-modal
      :maskClosable="false"
      v-model="isOverStayShow"
      title="办理续住"
      :width="930"
      destroyOnClose
      class="jlw_model_title">
      <order-detail :details="cardData" :overStayStatus="isOverStayShow" ref="overStayOrder"></order-detail>
      <template slot="footer">
        <a-button type="primary" ghost @click="cancelOverStay">取消</a-button>
      </template>
      <template slot="footer">
        <a-popconfirm title="是否办理续住？" @confirm="submitOverStay" okText="确认" cancelText="取消">
          <a-button type="primary" class="primary_linear">办理续住</a-button>
        </a-popconfirm>
      </template> -->
    </a-modal>
    <a-modal
      :maskClosable="false"
      v-model="isModifyCheckInShow"
      title="修改入住"
      :width="930"
      class="jlw_model_title"
      destroyOnClose>
      <order-check-in-detail :details="cardData" ref="checkIn"></order-check-in-detail>
      <template slot="footer">
        <a-button type="primary" class="primary_linear" @click="submitUpdateCheckInOrder" :loading="updateCheckInLoading">修改入住</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { iconEmty, iconAdd, iconDestine, iconPerson } from '@/core/icons'
import OrderDetail from './OrderDetail'
import OrderCheckInDetail from './OrderCheckInDetail'
import NewOrder from './NewOrder'
import { updateStatus } from '@/api/order'
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
  name: 'RoomCard',
  props: {
    roomData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  components: {
    OrderDetail,
    NewOrder,
    OrderCheckInDetail // 入住中修改修改入住详情model
  },
  data () {
    return {
      isRedBgShow: false,
      iconEmty,
      iconAdd,
      iconDestine,
      iconPerson,
      isModifyShow: false, // 修改预订订单
      // isOverStayShow: false, // 办理续住
      isModifyCheckInShow: false, // 修改入住订单
      isNewOrderShow: false, // 创建新订单窗口
      isOrderDetailShow: false, // 入住详情展示
      newLoading: false, // 新建加载状态 防止重复点击
      updateLoading: false, // 更新加载状态 防止重复点击（预订）
      updateCheckInLoading: false // 修改入住订单loading状态
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'currentSelectedDate',
      'STORE_ID',
      'OPERATOR_TYPE'
    ]),
    cardData () {
      return this.roomData
    },
    hoperatorName () {
      const glrxm = this.userInfo.jyrxm
      return `${glrxm}的门店`
    },
    /**
     * 房屋地址
     */
    fwdz () {
      const roomData = this.roomData
      if (roomData && roomData.fwdz) {
        const roomNo = roomData.fh // 房间号
        const address = roomData.fwdz // 地址
        return { address, roomNo }
      } else {
        return roomData.fwdz
      }
    },
    roomStatus () {
      const roomData = this.roomData
      if (roomData && roomData.orderList[0].ddzt && roomData.orderList[0].ddzt === '1') {
        return `已预订`
      } else if (roomData && roomData.orderList[0].ddzt && roomData.orderList[0].ddzt === '2') {
        return `已入住`
      } else {
        return `未入住`
      }
    },
    rzsj () {
      const rzsj = this.roomData.orderList[0].rzsj
      const rzsjArray = rzsj.split(' ')[0].split('-')
      return `${rzsjArray[1]}月${rzsjArray[2]}日`
    },
    ldsj () {
      const ldsj = this.roomData.orderList[0].ldsj
      const ldsjArray = ldsj.split(' ')[0].split('-')
      return `${ldsjArray[1]}月${ldsjArray[2]}日`
    },
    rzts () {
      return this.roomData.orderList[0].rzts
    },
    fh () {
      return this.roomData.fh
    },
    houseId () {
      return this.roomData.houseId
    },
    orderId () {
      return this.roomData.orderList[0].orderId
    },
    textChanges () {
      const orderRzsj = moment(this.roomData.orderList[0].rzsj).format('YYYY-MM-DD HH:mm:ss')
      const today = moment().format('YYYY-MM-DD HH:mm:ss')
      if (today === orderRzsj) {
        return '办理入住'
      } else {
        if (moment(this.roomData.orderList[0].rzsj) <= moment()) {
          return '办理入住'
        } else {
          return '提前入住'
        }
      }
    }
  },
  methods: {
    /**
     * 切换房屋状态
     */
    handleRoomStatus (roomStatus) {
      let statusClass = null
      switch (roomStatus) {
        case '已入住':
          statusClass = this.iconPerson
          this.isRedBgShow = true
          break
        case '已预订':
          statusClass = this.iconDestine
          this.isRedBgShow = true
          break
        default:
          statusClass = this.iconEmty
          this.isRedBgShow = false
          break
      }
      return statusClass
    },
    addOrder () {
      this.isNewOrderShow = true
      // this.$children.
      console.log('添加入住')
      console.log(this.currentSelectedDate)
    },
    handleOrderDetails () {
      this.isOrderDetailShow = true
    },
    /**
     * 修改房源入住状态
     */
    handleUpdateStatus (status) {
      const data = {
        hoperatorId: this.userInfo.id,
        storesId: this.STORE_ID,
        jylx: this.OPERATOR_TYPE,
        ddzt: status,
        houseId: this.houseId,
        orderId: this.orderId
      }
      let desMsg = ''
      switch (status) {
        case 4:
          desMsg = this.$t('message.cancelOrder')
          break
        case 2:
          desMsg = this.$t('message.hanldCheckIn')
          break
        case 3:
          desMsg = this.$t('message.checkOutOrder')
          break
      }
      updateStatus(data).then(res => {
        this.$notification['success']({
          message: this.$t('message.successTitle'),
          description: desMsg
        })
        this.$parent.$parent.init(this.currentSelectedDate)
        this.isOrderDetailShow = false
      }).catch(() => {
        // 办理续租失败也得更新数据（后台会自动取消无用订单）
        if (status === 2) {
          this.$parent.$parent.init(this.currentSelectedDate)
          this.isOrderDetailShow = false
        }
      })
    },
    handleUpdateOrder () {
      this.isModifyShow = true
      this.isOrderDetailShow = false
    },
    /**
     * 创建新建订单
     */
    async handleNewOrder () {
      this.newLoading = true
      try {
        const res = await this.$refs.newOrder.handleSubmit('Add_ORDER')
        if (res.code === 200) {
          this.$notification['success']({
            message: this.$t('message.successTitle'),
            description: this.$t('message.hanldNewOrder')
          })
          this.newLoading = false
          this.isNewOrderShow = false
          this.$parent.$parent.init(this.currentSelectedDate)
          // 创建成功才能回调清空表单
          this.$refs.newOrder.handleReset()
        }
      } catch {
        this.newLoading = false
        console.log('验证不通过')
      }
    },
    /**
     * 修改预订订单
     */
    async submitUpdateOrder () {
      this.updateLoading = true
      try {
        const res = await this.$refs.newOrder.handleSubmit('MODIFIER_ORDER')
        if (res.code === 200) {
          this.$notification['success']({
            message: this.$t('message.successTitle'),
            description: this.$t('message.updateOrder')
          })
          this.updateLoading = false
          this.isModifyShow = false
          this.$parent.$parent.init(this.currentSelectedDate)
        }
      } catch {
        this.updateLoading = false
        console.log('验证不通过')
      }
    },
    /** 打开修改入住订单窗口 */
    handleUpdateCheckInOrder () {
      this.isModifyCheckInShow = true
      this.isOrderDetailShow = false
    },
    /** 打开办理续住窗口 */
    // handleOverStay () {
    //   this.isOverStayShow = true
    //   this.isOrderDetailShow = false
    // },
    /**
     * 修改入住订单action
     */
    async submitUpdateCheckInOrder () {
      this.updateCheckInLoading = true
      const data = {
        hoperatorId: this.userInfo.id,
        storesId: this.STORE_ID,
        jylx: this.OPERATOR_TYPE,
        orderId: this.orderId
      }
      try {
        const res = await this.$refs.checkIn.handleSubmit(data)
        if (res.code === 200) {
          this.$notification['success']({
            message: this.$t('message.successTitle'),
            description: this.$t('message.updateOrder')
          })
          this.updateCheckInLoading = false
          this.isModifyCheckInShow = false
          console.log(this.currentSelectedDate)
          this.$parent.$parent.init(this.currentSelectedDate)
        }
      } catch {
        this.updateCheckInLoading = false
        console.log('验证不通过')
      }
    }
    /**
     * 办理续住
     * @param jssj 结束时间
     */
    // async submitOverStay (jssj) {
    //   const data = {
    //     hoperatorId: this.userInfo.id,
    //     storesId: this.STORE_ID,
    //     jylx: this.OPERATOR_TYPE,
    //     orderId: this.orderId
    //   }
    //   try {
    //     const res = await this.$refs.overStayOrder.handleSubmit(data)
    //     if (res.code === 200) {
    //       this.$notification['success']({
    //         message: this.$t('message.successTitle'),
    //         description: this.$t('message.stayOver')
    //       })
    //       this.isOverStayShow = false
    //       console.log(this.currentSelectedDate)
    //       this.$parent.$parent.init(this.currentSelectedDate)
    //     }
    //   } catch {
    //     console.log('验证不通过')
    //   }
    // },
    // cancelOverStay () {
    //   this.isOverStayShow = false
    // }
  }
}
</script>
<style lang="less" scoped>
.room-card:hover{
  cursor: pointer;
}
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display: block;}
.room-card {
  margin: 5px;
  display: inline-block;
  .card_body{
    border-radius: 5px;
    overflow: hidden;
    box-shadow:0px 6px 10px 0px rgba(191,191,191,0.5);
  }
  .content-bg1{
    background-image: url('../../../../assets/bg1.png') !important;
  }
  .content-bg{
  margin: -24px -24px 0px -24px;
  width: 228px;
  height: 152px;
  background-image: url('../../../../assets/bg0.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position:bottom;
  border-radius: 5px;
  cursor: default;
  .title {
  // margin: -24px -24px 0px -24px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  width:inherit;
  .address {
    font-weight: bold;
    font {
      font-weight: bold;
    }
  }
  .status {
    width: 43px;
    height: 26px;
    position: absolute;
    top: -9px;
    right: 16px;
  }
}
 .content {
   color: '#1890FF';
   display:table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 5px auto;
    border-width: 0px;
    width: 228px;
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    cursor: pointer;
    &-details{
      // width: 170px;
      font-weight: 700px;
      margin: 2px auto 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 10px;
      background-color: #ffffffef;
      border-radius: 5px;
      width: 212px;
      height: 80px;
      // margin-left: -10px;
      .times {
        width: 47px;
        height: 34px;
        padding: 5px;
        margin: 0 10px;
        vertical-align: middle;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;
      }
      .rzsj{
        font-size: 14px;
        font {
          font-size: 12px;
        }
      }
      .ldsj{
        font-size: 14px;
        font {
          font-size: 12px;
        }
      }
    }
  }
    }
}

</style>
